/* Variable definitions
   ====================
   <Variable name="keycolor" description="Main Color" type="color" default="#66bbdd" value="#787878"/>

   <Group description="Page Text" selector="body">
     <Variable name="body.font" description="Font" type="font"
         default="normal normal 13px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 13px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
     <Variable name="body.text.color" description="Main Text Color" type="color" default="#333333" value="#333333"/>
	 <Variable name="footer.text.color" description="Footer Text Color" type="color" default="#ffffff" value="#ffffff"/>
   </Group>

   <Group description="Main Backgrounds" selector=".body-fauxcolumns-outer">
     <Variable name="body.background.color" description="Outer Background" type="color" default="#dddddd" value="#dddddd"/>
     <Variable name="wrapper.background.color" description="Main Background" type="color" default="#ffffff" value="#ffffff"/>
   </Group>

   <Group description="Content Backgrounds" selector=".body-fauxcolumns-outer">
     <Variable name="header.background.color" description="Header Background" type="color" default="transparent" value="transparent"/>
	 <Variable name="content.background.color" description="Content Background" type="color" default="transparent" value="transparent"/>
	 <Variable name="post.background.color" description="Post Background" type="color" default="transparent" value="transparent"/>
	 <Variable name="sidebar.background.color" description="Sidebar Background" type="color" default="transparent" value="transparent"/>
	 <Variable name="footer.background.color" description="Footer Background" type="color" default="#ffffff" value="#ffffff"/>
   </Group>
   
   <Variable name="body.background" description="Body Background" type="background"
       color="$(body.background.color)" default="$(color) none repeat scroll top left" value="$(color) none repeat scroll top left"/>
   <Variable name="body.background.override" description="Body Background Override" type="string" default="" value=""/>
   
   <Group description="Links" selector=".main-outer">
     <Variable name="link.color" description="Link Color" type="color" default="#0099cc" value="#0099cc"/>
     <Variable name="link.visited.color" description="Visited Color" type="color" default="#0099cc" value="#0099cc"/>
     <Variable name="link.hover.color" description="Hover Color" type="color" default="#006c8e" value="#006c8e"/>
   </Group>

   <Group description="Blog Title" selector=".header h1.title, .header p.title">
     <Variable name="header.font" description="Font" type="font"
         default="normal bold 16px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal bold 16px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
     <Variable name="header.text.color" description="Title Color" type="color" default="#333333"  value="#333333"/>
   </Group>

   <Group description="Blog Description" selector=".header .description">
     <Variable name="description.text.color" description="Description Color" type="color"
         default="#555555"  value="#555555"/>
   </Group>

   <Group description="Post Title" selector="h2.post-title, .comments h4, h1.post-title">
     <Variable name="post.title.font" description="Font" type="font"
         default="normal bold 14px Arial, Helvetica, FreeSans, sans-serif" value="normal bold 14px Arial, Helvetica, FreeSans, sans-serif"/>
	 <Variable name="post.title.color" description="Text Color" type="color" default="#333333" value="#333333"/>
   </Group>
   
   <Group description="Gadgets" selector=".sidebar h2">
     <Variable name="widget.title.background.color" description="Background Color" type="color" default="#117AC9" value="#117AC9"/>
     <Variable name="widget.title.font" description="Title Font" type="font"
        default="normal normal 10px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 10px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
     <Variable name="widget.title.text.color" description="Title Color" type="color" default="#ffffff" value="#ffffff"/>
     <Variable name="widget.alternate.text.color" description="Alternate Color" type="color" default="#999999" value="#959595"/>
	 <Variable name="widget.border.color" description="Border Color" type="color" default="#0E62A0" value="#0E62A0"/>
   </Group>

   <Group description="Date Header" selector=".date-block">
     <Variable name="date.header.color" description="Text Color" type="color"
         default="#ffffff" value="#ffffff"/>
     <Variable name="date.header.background.color" description="Background Color" type="color"
         default="#89C237" value="#89C237"/>
   </Group>

   <Group description="Post Footer" selector=".post-footer">
     <Variable name="post.footer.background.color" description="Background Color" type="color"
         default="transparent" value="transparent"/>
     <Variable name="post.footer.text.color" description="Text Color" type="color" default="#666666" value="#666666"/>
     <Variable name="post.footer.border.color" description="Border Color" type="color" default="#eeeeee" value="#ececec"/>
   </Group>

   <Group description="Secondary Navigation Menu" selector="#nav">
     <Variable name="menu.background.color" description="Background Color" type="color" default="#117AC9" value="#117AC9"/>
	 <Variable name="menu.navigation.text.color" description="Text Color" type="color" default="#ffffff" value="#ffffff"/>
	 <Variable name="menu.navigation.hover.color" description="Hover Color" type="color" default="#333333" value="#333333"/>
	 <Variable name="menu.border.color" description="Border Color" type="color" default="#0E62A0" value="#0E62A0"/>
   </Group>

   <Group description="Footer" selector="#footer-wrapper">
     <Variable name="footer.color" description="Footer Color" type="color" default="#333333" value="#333333"/>
	 <Variable name="footer.border.color" description="Border Color" type="color" default="#dddddd" value="#dddddd"/>
   </Group>
 
*/

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}/* HTML5 display-role reset for older browsers */article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}body{line-height:1;display:block;}*{margin:0;padding:0;}html{display:block;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:&#39;&#39;;content:none;}table{border-collapse:collapse;border-spacing:0;}

/* FRAMEWORK */
.navbar,.post-feeds,.feed-links{display:none;}
.section,.widget{margin:0 0 0 0;padding:0 0 0 0;}
strong,b{font-weight:bold;}
cite,em,i{font-style:italic;}
a:link{color:$(link.color);text-decoration:none;outline:none;transition:all 0.5s;-moz-transition:all 0.5s;-webkit-transition:all 0.5s;}
a:visited{color:$(link.visited.color);text-decoration:none;}
a:hover{color:$(link.hover.color);text-decoration:none;}
a img{border:none;border-width:0;outline:none;}
abbr,acronym{border-bottom:1px dotted;cursor:help;}
sup,sub{vertical-align:baseline;position:relative;top:-.4em;font-size:86%;}
sub{top:.4em;}small{font-size:86%;}
kbd{font-size:80%;border:1px solid #999;padding:2px 5px;border-bottom-width:2px;border-radius:3px;}
mark{background-color:#ffce00;color:black;}
p,blockquote,pre,table,figure,hr,form,ol,ul,dl{margin:1.5em 0;}
hr{height:1px;border:none;background-color:#666;}

/* heading */
h1,h2,h3,h4,h5,h6{font-weight:bold;line-height:normal;margin:0 0 0.6em;}
h1{font-size:200%}
h2{font-size:180%}
h3{font-size:160%}
h4{font-size:140%}
h5{font-size:120%}
h6{font-size:100%}

/* list */
ol,ul,dl{margin:.5em 0em .5em 3em}
ol{list-style:decimal outside}
ul{list-style:disc outside}
li{margin:.5em 0}
dt{font-weight:bold}
dd{margin:0 0 .5em 2em}

/* form */
input,button,select,textarea{font:inherit;font-size:100%;line-height:normal;vertical-align:baseline;}
textarea{display:block;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
/* code blockquote */
pre,code{font-family:&quot;Courier New&quot;,Courier,Monospace;color:inherit;}
pre{white-space:pre;word-wrap:normal;overflow:auto;}
blockquote{background:#f8f8f8;margin-left:2em;margin-right:2em;border-left:4px solid #ccc;padding:1em 1em;font-style:italic;}

/* table */
.post-body table[border=&quot;1&quot;] th, .post-body table[border=&quot;1&quot;] td, .post-body table[border=&quot;1&quot;] caption{border:1px solid;padding:.2em .5em;text-align:left;vertical-align:top;}
.post-body table.tr-caption-container {border:1px solid #ddd;}
.post-body th{font-weight:bold;}
.post-body table[border=&quot;1&quot;] caption{border:none;font-style:italic;}
.post-body table{background:#f6f6f6;}
.post-body td, .post-body th{vertical-align:top;text-align:left;font-size:13px;padding:3px 5px;border:1px solid #ddd;}
.post-body th{background:#eee;}
.post-body table.tr-caption-container td {background:#f6f6f6;border:none;padding:8px;}
.post-body table.tr-caption-container, .post-body table.tr-caption-container img, .post-body img {max-width:440px;height:auto;}
.post-body td.tr-caption {color:#666;font-size:80%;padding:0px 8px 8px !important;}
body#layout #wrapper {padding:0 0 0 0;}

.clear {clear:both;}
.clear:after {visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}
body {background:$(body.background);margin:0 0 0 0;padding:0 0 0 0;color:$(body.text.color);font:$(body.font);text-align:left;}

/* WRAPPER */
#wrapper {background:$(wrapper.background.color) url(http://2.bp.blogspot.com/-iIS7Z6_z83A/UyNsVQw1AMI/AAAAAAAADJg/yVvfHOHFE_w/s1600/rect3005.png) no-repeat top center;width:728px;margin:0 auto;padding:5px 24px 24px;}

/* HEADER WRAPPER */
#header-wrapper {background:$(header.background.color);margin:0 auto;padding:10px 0;overflow:hidden;}
#header-wrapper a img, .banner728 a img {display:block;}
.header {float:left;width:250px;margin:0 0;}
.header h1.title,.header p.title {font:$(header.font);margin:0 0 0 0}
.header .description {color:$(description.text.color);margin:0.5em 0 0;padding:0px 0px;}
.header a {color:$(header.text.color);}
.header a:hover {color:#999;}
.banner468 {float:right;width:468px;margin:0 0;}

/* MAIN MENU NAVIGATION */
#nav {background:$(menu.background.color);border-bottom:2px solid $(menu.border.color);margin:0 auto;color:#fff;font:normal 10px Arial,Sans-Serif;text-transform:uppercase;display:inline-block;width:728px;}
#nav ul {float:left;margin:0px 0px;padding:0px 0px;height:38px;width:530px;}
#nav li {margin:0px 0px;padding:0px 0px;float:left;display:inline;list-style:none;position:relative;}
#nav li > a {display:block;padding:0px 10px;line-height:38px;text-decoration:none;color:$(menu.navigation.text.color);font-weight:bold;}
#nav li li > a {display:block;padding:0px 10px;line-height:28px;text-decoration:none;color:$(menu.navigation.text.color);font-weight:bold;}
#nav li:hover > a, #nav a:hover {background-color:$(menu.navigation.hover.color);}
#nav li ul {background:#555;width:170px;height:auto;position:absolute;top:100%;left:0px;z-index:10;display:none;}
#nav li li {display:block;float:none;}
#nav li:hover > ul {display:block;}
#nav li ul ul {left:100%;top:0px;}
#search-form {float:right;margin:0 10px 0 0;}
#search-form input#search-box[type="text"] {height:30px;line-height:30px;margin:4px 0;padding:0 10px;width:100px;color:#636363;border:none;}
#search-form input#search-button[type="submit"] {background:#333;color:#fff;height:30px;line-height:30px;margin:4px 0;padding:0 10px;border:none;}
#search-form input#search-button[type="submit"]:hover{background:#222;cursor:pointer}
#search-form input#search-box[type="text"]:focus {background:#eee;outline:none;}
.banner728 {
}
.banner728 .widget-content {margin:6px 0 0;max-width:728px;overflow:hidden;}
.banner728-bottom .widget-content {margin:6px 0;max-width:728px;overflow:hidden;}

/* CONTENT WRAPPER */
#content-wrapper {background:$(content.background.color);margin:0 auto;overflow:hidden;word-wrap:break-word;}

/* POST WRAPPER */
#post-wrapper {background:$(post.background.color);float:left;width:468px;margin:10px 5px 10px 0px;}
.post-container {margin:0 0;}
.breadcrumbs {font-size:11px;color:#666;padding:0 0 8px;margin:0 0 10px;border-bottom:1px dotted #d5d5d5;}
.post-label-block {margin:0 0 8px;}
.post-label-block .label-block {background:#44CCF2;color:#fff;display:inline-block;text-transform:uppercase;font-weight:bold;padding:1px 3px;font-size:10px;margin:0 0;}
.post-label-block .date-block {background:$(date.header.background.color);color:$(date.header.color);display:inline-block;text-transform:uppercase;font-weight:bold;padding:1px 3px;font-size:10px;margin:0 0;}
.post-label-block .label-block:hover, .post-label-block .date-block:hover {background:#333;}
.post {border-bottom:1px solid #ddd;margin:0 0 10px;padding:0 0 10px;}
.post-body {line-height: 1.4;}
h2.post-title, h1.post-title {font:$(post.title.font);}
h2.post-title a, h1.post-title a, h2.post-title, h1.post-title {color:$(post.title.color);}
h2.post-title a:hover, h1.post-title a:hover {color:$(link.color);}
.img-thumbnail {float:left;width:120px;height:90px;margin:0 10px 0 0;padding:3px;border:1px solid #ddd;}
.img-thumbnail img {width:120px;height:90px;}
.post-footer {background:$(post.footer.background.color);color:$(post.footer.text.color);padding:10px 0;margin:10px 0 0;border-top:2px solid $(post.footer.border.color);}
#blog-pager {margin:0 0;clear:both !important;padding:0 0;text-transform:uppercase;font-size:10px;font-weight:normal;}
#blog-pager-newer-link a {background:#89C237;float:left;display:block;padding:1px 3px;color:#fff;}
#blog-pager-older-link a {background:#89C237;float:right;display:block;padding:1px 3px;color:#fff;}
a.home-link {background:#89C237;display:inline-block;padding:1px 3px;color:#fff;}
#blog-pager-older-link a:hover, #blog-pager-newer-link a:hover, a.home-link:hover {background-color:#333;color:#fff;}

/* SIDEBAR WRAPPER */
#sidebar-wrapper {background:$(sidebar.background.color);float:right;width:250px;margin:10px 0px 10px 5px;}
.sidebar-container {margin:0 0;}
.sidebar h2 {font:$(widget.title.font);background:$(widget.title.background.color);border-bottom:2px solid $(widget.border.color);color:$(widget.title.text.color);margin:0 0 10px 0;padding:3px 8px;text-transform:uppercase;}
.sidebar .widget {padding:0 0 10px;}
.sidebar ul, .sidebar ol {list-style-type:none;margin:0 0 0 0;padding:0 0 0 0;}
.sidebar li {margin:0 0 0 0;padding:3px 0;border-bottom:1px dotted #ddd}

/* label */
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 {font-size:100%;filter:alpha(100);opacity:10}
.cloud-label-widget-content{text-align:left}
.label-size{display:block;float:left;background:#89C237;margin:0 3px 3px 0;color:#eee;font-size:10px;text-transform:uppercase;}
.label-size a,.label-size span{display:inline-block;color:#fff;padding:1px 3px;}
.label-size:hover{background:#333333}
.label-count {white-space:nowrap;padding-right:3px;margin-left:-3px;}
.label-size {line-height:1.2}



/* BOTTOMBAR WRAPPER */
#bottombar-wrapper {margin:0 auto;}
.banner300 {margin:0 0 10px;}
.banner300 img {max-width:468px !important;}

/* FOOTER WRAPPER */
#footer-wrapper {background:$(footer.background.color);border-top:2px solid $(footer.border.color);margin:0 auto;overflow:hidden;color:$(footer.color);font:normal 10px Arial,Sans-Serif;text-transform:uppercase;}
.footer-left {float:left;margin:10px 0 0;}
.footer-right {float:right;margin:10px 0 0;}
#footer-wrapper a {color:$(footer.color);}
#footer-wrapper a:hover {color:$(link.color);}

/* VIEWPORT */
@-wekit-viewport{width:device-width;max-zoom:1;min-zoom:1}
@-moz-viewport{width:device-width;max-zoom:1;min-zoom:1}
@-ms-viewport{width:device-width;max-zoom:1;min-zoom:1}
@-o-viewport{width:device-width;max-zoom:1;min-zoom:1}
@viewport{width:device-width;max-zoom:1;min-zoom:1}

/* COMMENT */
.comment-form {overflow:hidden;}
.comments h3 {line-height:2em;font-weight:bold;margin:0 0 20px 0;font-size:14px;padding:0 0 0 0;}
h4#comment-post-message {display:none;margin:0 0 0 0;}
.comments{clear:both;margin-top:10px;margin-bottom:0}
.comments .comments-content{font-size:13px;margin-bottom:8px}
.comments .comments-content .comment-thread ol{text-align:left;margin:13px 0;padding:0}
.comments .avatar-image-container {background:#EDEFF1;overflow:hidden;padding:6px;}
.comments .comment-block{position:relative;background:#EDEFF1;padding:10px;margin-left:60px;border-left:2px solid #89C237;}
.comments .comment-block:before {content:&quot;&quot;;width:0px;height:0px;position:absolute;right:100%;top:15px;border-width:10px;border-style:solid;border-color:transparent #89C237 transparent transparent;display:block;}
.comments .comments-content .comment-replies{margin:8px 0;margin-left:60px}
.comments .comments-content .comment-thread:empty{display:none}
.comments .comment-replybox-single {background:#CED3D9;padding:0;margin:8px 0;margin-left:60px}
.comments .comment-replybox-thread {background:#EDEFF1;margin:8px 0 0 0;padding:0;}
.comments .comments-content .comment{margin-bottom:6px;padding:0}
.comments .comments-content .comment:first-child {padding:0;margin:0}
.comments .comments-content .comment:last-child {padding:0;margin:0}
.comments .comment-thread.inline-thread .comment, .comments .comment-thread.inline-thread .comment:last-child {margin:0px 0px 5px 30%}
.comment .comment-thread.inline-thread .comment:nth-child(6) {margin:0px 0px 5px 25%;}
.comment .comment-thread.inline-thread .comment:nth-child(5) {margin:0px 0px 5px 20%;}
.comment .comment-thread.inline-thread .comment:nth-child(4) {margin:0px 0px 5px 15%;}
.comment .comment-thread.inline-thread .comment:nth-child(3) {margin:0px 0px 5px 10%;}
.comment .comment-thread.inline-thread .comment:nth-child(2) {margin:0px 0px 5px 5%;}
.comment .comment-thread.inline-thread .comment:nth-child(1) {margin:0px 0px 5px 0;}
.comments .comments-content .comment-thread{margin:0;padding:0}
.comments .comments-content .inline-thread{padding:0 0;margin:0}
.comments .comments-content .icon.blog-author{position:absolute;top:-2px;right:-2px;margin:0;background-image: url(http://3.bp.blogspot.com/-c0gwWErZ6ZI/UbSD539E_qI/AAAAAAAAAPQ/vQuaJw27r1A/s1600/bitmap.png);width:59px;height:43px;}
.comments .comment .comment-actions a{background:#89C237;display:inline-block;color:#fff;font-weight:bold;font-size:10px;line-height:15px;padding:2px 3px;margin:4px 8px 0 0;}
.comments .comment .comment-actions a:hover, .comments .continue a:hover{text-decoration:none;background:#333;}
.comments .continue a {background:#89C237;color:#fff;display:inline-block;padding:8px;font-size:10px;}
.pesan-komentar {background:#666;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;position:relative;color:#fff;padding:10px 20px;margin:8px;}
.pesan-komentar p {line-height:normal;margin:0 0;}
.pesan-komentar:before {content:&quot;&quot;;width:0px;height:0px;position:absolute;top:100%;left:30px;border-width:10px;border-style:solid;border-color:#666 transparent transparent transparent;display:block;}

/* MEDIA QUERIES for Custom Mobile Template */
@media only screen 
and (max-width:320px) {
#wrapper {padding:6px;}
}
@media only screen and (min-width:320px) and (max-width:480px) {
#wrapper {padding:8px;}
}
@media only screen and (min-width:480px) and (max-width:640px) {
#wrapper {padding:10px;}
}
@media only screen and (min-width:640px) {
#wrapper {padding:11px;}
}
#wrapper {float:none;width:auto;max-width:728px;}
.navigation-menu, #header-wrapper, #nav, #content-wrapper, #post-wrapper, #sidebar-wrapper, #footer-wrapper, .header, .banner468 {float:none;width:auto;max-width:728px;padding:0 0 0 0;margin:0 0 0 0;}
.post-container, .sidebar-container, .header {margin:8px 0 !important;}
.mobile .post-body, .mobile  #blog-pager, .mobile .header .description, .mobile-index-contents .post-body {font-size:13px;}
h3.mobile-index-title {font:normal bold 14px Arial, sans-serif;width:auto;max-width:728px;}
.mobile-index-thumbnail {width:48px;height:48px;float: left;margin:0 8px 3px 0 !important;padding:3px;border:1px solid #ddd;}
.mobile-index-thumbnail img {width:48px !important;height:48px;}
.mobile img, .mobile iframe {max-width:100%;}
.header img {width:auto;}
#blog-pager-home-link {width:80px !important;}
.mobile .comment-form {max-width:728px;}
.mobile #comment-editor {display:block !important;}
.comments .avatar-image-container {display:none;}
.comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single {margin-left:10px}
.banner300 img {max-width:100% !important;}

/* NAVIGASI */
.mobile #mobile-nav {background:#117AC9;font-size:13px;font-weight:bold;color:#fff;text-align:center;width:auto;overflow:hidden;margin:0;padding:6px;border-bottom:2px solid #0E62A0}
.mobile #mobile-nav span a{color:#fff;padding:3px 0;margin:0}
.mobile #mobile-nav span a:hover{text-decoration:underline;}